<script>
import register from "../utils/register";
import constants from "../utils/constants";
import Vue from "vue";
import { compile, mountedVNode, mountedRenderFn } from "../utils/compile";
const TAG = "imwe-marker";

export default {
    name: TAG,
    data() {
        let self = this;
        return {
            propsRedirect: {
                template: "content",
                vnode: "content",
                contentRender: "content"
            },
            converters: {
                shape(options) {
                    return new AMap.MarkerShape(options);
                },
                shadow(options) {
                    return new AMap.Icon(options);
                },
                template(tpl) {
                    const template = compile(tpl, self);
                    this.$customContent = template;
                    return template.$el;
                },
                vnode(vnode) {
                    const _vNode =
                        typeof vnode === "function" ? vnode(self) : vnode;
                    const vNode = mountedVNode(_vNode);
                    this.$customContent = vNode;
                    return vNode.$el;
                },
                contentRender(renderFn) {
                    const template = mountedRenderFn(renderFn, self);
                    // this.$customContent = template;
                    return template.$el;
                },
                label(options) {
                    const { content = "", offset = [0, 0] } = options;
                    return {
                        content: content,
                        offset: toPixel(offset)
                    };
                }
            }
        };
    },
    mixins: [register],
    props: [
        "vid",
        "position",
        "offset",
        "icon",
        "content",
        "topWhenClick",
        "bubble",
        "draggable",
        "raiseOnDrag",
        "cursor",
        "visible",
        "zIndex",
        "angle",
        "autoRotation",
        "animation",
        "shadow",
        "title",
        "clickable",
        "shape",
        "extData",
        "label",
        "events",
        "onceEvents",
        "template",
        "vnode",
        "contentRender"
    ],
    render(h) {
        const slots = this.$slots.default || [];
        console.log("h", h);
        if (slots.length) {
            this.tmpVM.node = slots;
        }
        return null;
    },
    methods: {
        _initComponents(options) {
            console.log("options", options);
            this.$amapComponent = new AMap.Marker(options);
            console.log("marker map ", this.$amap);
            // this.$amap.add(this.$amapComponent)
        }
    }
};
</script>
